import { LitElement, html } from "lit";

class LightDom extends LitElement {
    static get properties() {
        return {
            text: { type: String }
        };
    }


/**
    *如果你不想使用影子DOM，你可以覆盖
    * ' createRenderRoot '方法。默认情况下，LitElement设置
    *渲染根到shadowDom。
    *这通常用于小型叶片组件。
*/

    createRenderRoot() {
        return this;
    }

    constructor() {
        super();
        this.text = "I'm rendered in the light DOM!";
    }

    render() {
        return html`
      <h3>
        ${this.text}
      </h3>
    `;
    }
}

customElements.define("light-dom", LightDom);

class ShadowDom extends LitElement {
    static get properties() {
        return {
            text: { type: String }
        };
    }

    constructor() {
        super();
        this.text = "I'm rendered in the shadow DOM!";
    }

    render() {
        return html`
      <h3>
        ${this.text}
      </h3>
    `;
    }
}

customElements.define("shadow-dom", ShadowDom);
